<template>
  <el-container>
    <el-main style="padding: 0 20px; background-color: white">
      <div v-loading="ganttLoading" :style="{ height: ganttHeight }" class="ganntClass">
        <div ref="gantt" class="gantt-container"/>
      </div>
    </el-main>
  </el-container>
</template>


<script>
import gantt from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

export default {
  data() {
    return {
      //gantt高度
      ganttHeight: innerHeight - 215 + 'px',
      ganttLoading: false,
      projectId: '',
      tasks: {
        data: []
      }
    };
  },
  created() {
    //清空gantt数据
    gantt.clearAll();
    this.projectId = this.$route.query.id;
    this.getProjectTaskData();
  },
  mounted() {
    var $this = this;
    //本地化
    gantt.i18n.setLocale('cn');

    //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
    gantt.config.autosize = false;
    //只读模式：打开后不可以操作甘特图
    gantt.config.readonly = false;
    //是否显示左侧树表格
    gantt.config.show_grid = true;
    //表格列设置：我们在后台获取数据后，会解析到这个表格列中，这里面会含有很多隐藏列，作用是甘特图中不需要看隐藏列，但当我们获取甘特图的任务时，这些隐藏列会跟随任务方便使用
    gantt.config.columns = [
      {
        //最左侧新增符号列，甘特图内置可选使用列
        name: 'add',
        label: '',
        width: '40'
      },
      {
        name: 'buttons',
        label: '选择',
        width: 28,
        template: function (task) {
          return '<input type="checkbox" name="taskCheckBox" id="taskCheckBoxId" value="' + task.id + '" />';
        }
      },
      {
        name: 'text',
        label: '任务名称',
        tree: true,
        width: '150'
      },
      {
        name: 'roleName',
        label: '角色',
        width: '120'
      },
      {
        name: 'ownerName',
        label: '执行人',
        width: '100'
      },
      {
        name: 'start_date',
        label: '计划开始时间',
        align: 'center',
        width: '90'
      },
      {
        name: 'end_date',
        label: '计划结束时间',
        align: 'center',
        width: '90'
      },
      {
        //隐藏列hide
        name: 'status',
        hide: true
      }
    ];
    //自适应
    //gantt.config.fit_tasks = true;

    //表头高度
    gantt.config.scale_height = 50;

    //开启提示：鼠标悬浮在gantt行上显示
    gantt.plugins({
      tooltip: true
    });

    //时间轴格式化模版
    var yearScaleTemplate = function (date) {
      return date.getFullYear();
    };
    var monthScaleTemplate = function (date) {
      var month = date.getMonth();
      if (month == 0) {
        month = 'Jan';
      }
      //省略...
      else if (month == 11) {
        month = 'Dec';
      }
      return month;
    };
    //时间轴样式
    var yearScaleCss = function () {
      return 'yearScaleStyle';
    };
    var monthScaleCss = function () {
      return 'monthScaleStyle';
    };
    gantt.config.scales = [
      {unit: 'year', step: 1, format: yearScaleTemplate, css: yearScaleCss},
      {unit: 'month', step: 1, format: monthScaleTemplate, css: monthScaleCss}
    ];

    gantt.attachEvent('onGanttReady', function () {
      var tooltips = gantt.ext.tooltips;
      gantt.templates.tooltip_text = function (start, end, task) {
        return '任务编号：' + task.no + '<br/>Task：' + task.text + '<br/>Role：' + task.roleName + '<br/>Owner：' + task.ownerName + '<br/>计划开始时间：' + gantt.templates.tooltip_date_format(start) + '<br/>RCD：' + gantt.templates.tooltip_date_format(end);
      };
    });

    //禁用双击事件
    gantt.config.details_on_dblclick = false;
    //关闭所有错误提示信息：gantt有自己的异常消息，如果不关闭可能页面会弹出异常消息
    gantt.config.show_errors = false;

    //灯箱事件
    gantt.attachEvent('onBeforeLightbox', function (task_id) {
      //刷新灯箱数据
      //gantt.resetLightbox();
      //true：打开灯箱
      //return true;

      //这里调用了自己的页面，没有打开默认灯箱
      $this.addTask(task_id);
    });

    //禁止拖动设置任务长度
    gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
      return false;
    });
    //禁止拖动任务
    gantt.config.drag_move = false;
    //禁止拖动任务进度
    gantt.config.drag_progress = false;
    //禁止拖放添加Link
    gantt.config.drag_links = false;

    //开启标记
    gantt.plugins({
      marker: true
    });

    //标记当前日期
    var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
    var markerId = gantt.addMarker({
      start_date: new Date(),
      css: 'today',	//标记样式，style中对应
      text: 'Today',
      title: dateToStr(new Date())
    });
    gantt.getMarker(markerId);

    // 初始化
    gantt.init(this.$refs.gantt);
  },

  methods: {
    //获取甘特图数据
    getProjectTaskData() {
      this.ganttLoading = true;
      this.tasks.data = [];
      this.tasks.data = [
        {
          id: 1,
          text: '计划时间',
          start_date: '2020-04-08',
          duration: 10,
          open: true, //默认打开，
          toolTipsTxt: 'xxxxxxxxxxxxxxxxx'
        },
        {
          toolTipsTxt: 'xxxxxxxxxxxxxxxxx父任务01-001',
          text: '冒烟阶段', // 任务名
          start_date: '2020-04-08', // 开始时间
          id: 11, // 任务id
          duration: 3, // 任务时长，从start_date开始计算
          parent: 1, // 父任务ID
          type: 1
        },
        {
          toolTipsTxt: '',
          text: '单元测试', // 任务名
          start_date: '2020-04-11', // 开始时间
          id: 12, // 任务id
          duration: 2, // 任务时长，从start_date开始计算
          parent: 1, // 父任务ID
          type: 2

        },
        {
          toolTipsTxt: '',
          text: '回归测试', // 任务名
          start_date: '2020-04-13', // 开始时间
          id: 13, // 任务id
          duration: 4, // 任务时长，从start_date开始计算
          parent: 1, // 父任务ID
          type: 3

        }, {
          toolTipsTxt: '',
          text: '阶段四', // 任务名
          start_date: '2020-04-13', // 开始时间
          id: 14, // 任务id
          duration: 4, // 任务时长，从start_date开始计算
          parent: 1, // 父任务ID
          type: 4

        },
        //========================
        {
          id: 2,
          text: '实际时间',
          start_date: '2020-04-08',
          duration: 8,
          open: true, //默认打开，才可隐藏左侧表格
          toolTipsTxt: 'xxxxxxxxxxxxxxxxx',
          state: 'default'
          // color:"#409EFF",
          //progress: 0.6
        },
        {
          toolTipsTxt: 'xxxxxxxxxxxxxxxxx父任务01-001',
          text: '冒烟阶段', // 任务名
          start_date: '2020-04-08', // 开始时间
          id: 21, // 任务id
          duration: 2, // 任务时长，从start_date开始计算
          parent: 2, // 父任务ID
          type: 1
        },
        {
          toolTipsTxt: '',
          text: '单元测试', // 任务名
          start_date: '2020-04-09', // 开始时间
          id: 22, // 任务id
          duration: 2, // 任务时长，从start_date开始计算
          parent: 2, // 父任务ID
          type: 2
        },
        {
          toolTipsTxt: '',
          text: '回归测试', // 任务名
          start_date: '2020-04-11', // 开始时间
          id: 23, // 任务id
          duration: 2, // 任务时长，从start_date开始计算
          parent: 2, // 父任务ID
          type: 3
        }
      ];
      // 数据解析:将数据解析到gantt列数据中
      gantt.parse(this.tasks);
      // 刷新数据
      gantt.refreshData();
      this.ganttLoading = false;
    },

    //自定义新增任务
    addTask(taskId) {
      var $this = this;
      this.$nextTick(() => {
        $this.$refs.taskAdd.init(task, action, parentTask, $this.milestoneOriginalData);
      });
      //删除任务：每次调用gantt内置新增事件时，gantt会直接新增任务到甘特图中，而我们需要的是自定义新增任务
      gantt.deleteTask(taskId);
      //灯箱事件必须返回布尔值，这里使用了自定义灯箱返回false，即不打开灯箱
      return false;
    }
  }
};
</script>


<style lang="scss" scoped>
.gantt-container {
  height: 100%;
}

.ganntClass {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
}

.today {
}
</style>
